import { Menu } from 'antd';
import { DesktopOutlined, SettingOutlined, UserOutlined } from '@ant-design/icons';
import style from './index.module.less';
import { useEffect, useState } from 'react';
import { useNavigate,useLocation } from 'react-router-dom';
const SideMenu = () => {
    const navigate = useNavigate();
    const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
    const { pathname } = useLocation();


    const items = [
        { label: '工作台', key: '/dashboard', icon: <DesktopOutlined /> },
        {
            label: '系统管理', key: '2', icon: <SettingOutlined />,
            children: [
                { label: '用户管理', key: '/system/user', icon: <UserOutlined /> },
                { label: '用户管理demo', key: '/system/userDemo', icon: <UserOutlined /> },
                { label: '地图功能', key: '/system/map', icon: <UserOutlined /> },
                { label: 'xRender', key: '/system/xrender', icon: <UserOutlined /> },
            ]
        },
    ];
    const toHome = () => {
        //跳转到首页
        navigate("/");
    }
    // 跳转其他页面
    const handleClickMenu = ({ key }: { key: string }) => {
        setSelectedKeys([key]);//高亮
        navigate(key);
    }

    useEffect(()=>{
        // 页面刷新加载之前历史路由从而高亮
        setSelectedKeys([pathname]);
    },[])

    return (
        <>
            <div className={style.headers} onClick={toHome}><img src="/imgs/logo.png" alt="logo" /><span>后台管理</span></div>
            <Menu theme="dark" mode="inline" defaultOpenKeys={selectedKeys} selectedKeys={selectedKeys} items={items} onClick={handleClickMenu} />
        </>
    )
}

export default SideMenu